<template>
	<view class="home page bgf6">
		<view>
			<view class="two">
				<view class="mt4 flex flexC py5 local" @click="clickCity">
					<image class="near" src="/static/img/tabbar/near_normal.png" mode="aspectFill"></image>
					<text class="cfad all">{{cityTxt}}</text>
				</view>
				<view class="search r40 mt4 px10 flex flexC py5 ipt">
					<image class="sear" src="/static/img/icon/search.png" mode="aspectFill"></image>
					<input @input="search" class="pl8 flex1 fs14 bold6" v-model="keyword" confirm-type="search"
						type="text" placeholder="请输入门店名称" />
					<text class="px8 c99 fs11">|</text>
					<view class="cfad" @click="search">搜索</view>
				</view>
			</view>
			<view class="tabbox bgf6 c66 fs16 px16 pb12 pt8 flex flexC">
				<view v-for="(item,index) in tabs" class="item pr28 py6" :key="index" @click="clickTabType(index)">
					<text :class="selIndex == index ? 'active' : ''">{{item.name}}</text>
					<image v-if="selIndex == index" class="icon" src="/static/img/icon/sel.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<scroll-view class="list rel bgf6" @scroll="onScroll" @scrolltolower="nextPage" scroll-y
			:style="{height: 'calc(100vh - ' + statusBar + 'px)'}">
			<block v-for="(item,index) in list" :key="index">
				<view class="store bgff r9 mx12 mb10 shadow">
				<!-- 	<view class="flex flexC flexB py13 px14 titlebox">
						<text class="c00 fs16 mr10 bold6 flex1 ellipsis1">{{item.name}}</text>
						<text v-if="item.status_txt == '营业中'" class="status r3 fs10 bgf95 aliC px6 py2 bold6">{{item.status_txt}}</text>
						<text v-if="item.status_txt == '筹备中'" class="status r3 fs10 bgf95  aliC px6 py2 bold6">{{item.status_txt}}</text>
						<text v-if="item.status_txt == '试营业'" class="status r3 fs10 bgf95 aliC px6 py2 bold6">{{item.status_txt}}</text>
						<text v-if="item.status_txt == '休息中'" class="status r3 fs10 bgf95 aliC px6 py2 bold6">{{item.status_txt}}</text>
						
					</view> -->
					<view class="px14 py12 flex flexC " @click="detail(item)">
						<!-- <view class="rel">
							<image  class="logo r9" v-if="item.is_ktv=='1'" src="https://img.quexiaqp.com/uploads/20241220/cc06b0623fad5934f47f0aa34545f478.png" mode="aspectFill"></image>
							<image  class="logo r9" v-else-if="item.shop_type=='棋牌'" src="https://img.quexiaqp.com/uploads/20241224/275580096744181584d1051d060b208b.png" mode="aspectFill"></image>
							<image  class="logo r9" v-else-if="item.shop_type=='台球'" src="https://img.quexiaqp.com/uploads/20241224/77851c6946a62b56dcb059a90271d764.png" mode="aspectFill"></image>
							<image  class="logo r9" v-else-if="item.shop_type=='棋牌台球' || item.shop_type=='台球棋牌'" src="https://img.quexiaqp.com/uploads/20241224/c128fdecfefe9e50825d2342be57c237.png" mode="aspectFill"></image>
							
						</view> -->
						
						<view class="rel">
							<image  class="logo r9" v-if="item.is_ktv=='1' && item.store_type == '1'" src="https://img.quexiaqp.com/uploads/20250830/7fe656704bf59ed6ae8485ac37ab5609.png" mode="aspectFill"></image>
							<image  class="logo r9" v-else-if="item.is_ktv=='1' && item.store_type == '2'" src="https://img.quexiaqp.com/uploads/20250830/c24d2a67b250ba2df4d3de12aaeb95b8.png" mode="aspectFill"></image>
							<image  class="logo r9" v-else-if="item.is_ktv=='1' && item.store_type == '3'" src="https://img.quexiaqp.com/uploads/20250928/f0d0e70e83fe770425078f154d2bad05.png" mode="aspectFill"></image>
							
							<image  class="logo r9" v-else-if="item.shop_type=='棋牌' && item.store_type == '1'" src="https://img.quexiaqp.com/uploads/20250830/965ba681207deb626e86354206d1ac90.png" mode="aspectFill"></image>
							<image  class="logo r9" v-else-if="item.shop_type=='棋牌' && item.store_type == '2'" src="https://img.quexiaqp.com/uploads/20250830/fc3007913177e8ca9457892efdd75513.png" mode="aspectFill"></image>
							<image  class="logo r9" v-else-if="item.shop_type=='棋牌' && item.store_type == '3'" src="https://img.quexiaqp.com/uploads/20250928/8d7b8e0590fe72506e44b1973bdcca09.png" mode="aspectFill"></image>
							
							<image  class="logo r9" v-else-if="item.shop_type=='台球' && item.store_type == '1'" src="https://img.quexiaqp.com/uploads/20250830/18fd57a3dac4b1219764e267628ac502.png" mode="aspectFill"></image>
							<image  class="logo r9" v-else-if="item.shop_type=='台球' && item.store_type == '2'" src="https://img.quexiaqp.com/uploads/20250830/db103cd046f593e2cedd0ee791ef4f1b.png" mode="aspectFill"></image>
							<image  class="logo r9" v-else-if="item.shop_type=='台球' && item.store_type == '3'" src="https://img.quexiaqp.com/uploads/20250928/11d7ac624942459fc9c383deab9c1fc6.png" mode="aspectFill"></image>
							
							<image  class="logo r9" v-else-if="(item.shop_type=='棋牌台球' || item.shop_type=='台球棋牌') && item.store_type == '1'" src="https://img.quexiaqp.com/uploads/20250830/2515981f55b6c88a8759d7b97f05e2dc.png" mode="aspectFill"></image>
							<image  class="logo r9" v-else-if="(item.shop_type=='棋牌台球' || item.shop_type=='台球棋牌') && item.store_type == '2'" src="https://img.quexiaqp.com/uploads/20250830/38ccc047d50694934b1911aad7fb8f28.png" mode="aspectFill"></image>
							<image  class="logo r9" v-else-if="(item.shop_type=='棋牌台球' || item.shop_type=='台球棋牌') && item.store_type == '2'" src="https://img.quexiaqp.com/uploads/20250928/4f120dad55939f2acb2189461956ec75.png" mode="aspectFill"></image>
							
						</view>
						
						<view class="flex1 pl12">
							<text class="c00 fs16 mr10 bold6 flex1 ellipsis1">{{item.name}}</text>
							<view class="ellipsis2 c85 fs13" >
								<!-- <image class="local aliM" src="/static/img/icon/address.png" mode="widthFix"></image> -->
								<text class="aliM">{{item.address}}</text>
							</view>
							<view class="mt8 fs12 c1a flex flexC mt10">
								<view class="bgf5 r2 mr9 flex flexC" v-if="item.qp == 1">
									<image class="w17" src="/static/img/icon/pai.png" mode="aspectFit"></image>
									<text class="c1b ml2">棋牌</text>
								</view>
								<view class="bgf5 r2 mr9 flex flexC" v-if="item.tq == 1">
									<image class="w17" src="/static/img/icon/ball.png" mode="aspectFit"></image>
									<text class="c57 ml2">台球</text>
								</view>
								<view class="bgf5 r2 flex flexC" v-if="item.is_ktv == 1">
									<image class="w17" src="/static/img/icon/ktv.png" mode="aspectFit"></image>
									<text class="c90 ml2">KTV</text>
								</view>
							</view>
							<view class="fs13 flex flexC mt16">
								<!-- <image @click.stop="location(item)" class="w44" src="/static/img/icon/local2.png" mode="aspectFill"></image>
								<image @click.stop="call(item)" class="w44 ml14" src="/static/img/icon/call3.png" mode="aspectFill"></image> -->
								<text v-if="item.status_txt == '营业中'" class="status r3 fs10 bgf95 aliC px6 py2 bold6">{{item.status_txt}}</text>
								<text v-if="item.status_txt == '筹备中'" class="status r3 fs10 bgf95  aliC px6 py2 bold6">{{item.status_txt}}</text>
								<text v-if="item.status_txt == '试营业'" class="status r3 fs10 bgf95 aliC px6 py2 bold6">{{item.status_txt}}</text>
								<text v-if="item.status_txt == '休息中'" class="status r3 fs10 bgf95 aliC px6 py2 bold6">{{item.status_txt}}</text>
								<text class="bgf5c c33 px16 py10 r40 ml14" style="margin-left: 40%;" @click="detail(item)">点击查看</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
		<!-- 城市选择 -->
		<uni-popup ref="citypicker" type="bottom">
			<city-picker @selectCity="selectCity" :list="cityList"></city-picker>
		</uni-popup>
		<msg-pop></msg-pop>
	</view>
</template>

<script>
	import msgPop from '@/components/msg-pop/msg-popup.vue';

	const statusBar = uni.getSystemInfoSync().statusBarHeight + 5;
	export default {
		components: {
			msgPop
		},

		data() {
			return {
				statusBar,
				keyword: '',
				lat: '28.2129183',
				lng: '112.88881136',
				cityTxt:'全部',
				city: '',
				cityList: [],
				banner: [],
				locationCity: '',
				page: 1,
				list: [],
				code: '',
				isLastPage: false,
				isnodata: false,
				orgId: 27,
				scrollIng: false,
				timer: null,
				fixedClass: '',
				tabs: [{
						name: '全部'
					},
					{
						name: '台球'
					},
					{
						name: '棋牌'
					}
				],
				selIndex: 0,
				type: '',
				isRequestIng: false
			}
		},
		onLoad(option) {
			uni.setStorageSync("orgId", this.orgId);
			var token = uni.getStorageSync("token");
			if (token == null || token == '') {
				this.init();
			}
			if(option.type =='tq'){
				this.selIndex = 1;
				this.type = 'tq';
			}else if(option.type == 'qp'){
				this.selIndex = 2;
				this.type = 'qp';
			}else if(option.type == 'ktv'){
				this.selIndex = 3;
				this.type = 'ktv';
			}
			this.getLocation();
		},
		
		onTabItemTap: function(e) {
			console.log(e);
			uni.vibrateShort({
				success: function() {
					console.log('success');
				}
			});
		},
		
		onPullDownRefresh() {
			this.isLastPage = false;
			this.isnodata = false;
			this.page = 1;
			this.list = [];
			this.getShopList();
		},

		onShow() {
			var city = uni.getStorageSync("city");
			console.log('=获取的城市==>>'+city)
			if (city != "") {
				this.isLastPage = false;
				this.isnodata = false;
				this.page = 1;
				this.list = [];
				if(city == '请选择城市'){
					this.city = '';
				}else{
					this.city = city;
					this.cityTxt = city;
				}
				this.selIndex= 0;
				this.type = '';
				uni.removeStorageSync("city");
				this.getShopList();
			}
		},
		
		onShareAppMessage(res) {
			console.log(res);
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '台球·棋牌·KTV 尽在雀侠', //自定义分享标题
				path: '/pages/home/index2', // '/pages/...'分享页面路径（打开分享时进入页），以/开头
				imageUrl: "https://app.quexiaqp.com/uploads/20241219/a7ab5af5546dc0232e0ff570cc05743f.png"
			}
		},

		onShareTimeline(res) { //分享到朋友圈
			return {
				title: "台球·棋牌·KTV 尽在雀侠",
				path: '/pages/home/index2', // '/pages/...'分享页面路径（打开分享时进入页），以/开头
				imageUrl: "https://app.quexiaqp.com/uploads/20241219/a7ab5af5546dc0232e0ff570cc05743f.png"
			}
		},
		methods: {
			clickGame(){
				uni.showToast({
					title:"敬请期待，即将上线",
					icon:'none'
				})
			},
			
			clickYue(){
				uni.navigateTo({
					url:'/pages/reservation/index'
				})
			},

			clickBrand() {
				uni.navigateTo({
					url: '/pages/shop/webview'
				})
			},

			search() {
				this.list = [];
				this.page = 1;
				this.isLastPage = false,
				this.isnodata = false,
				this.getShopList();

			},
			clickTabType(index) {
				this.changeTab = true;
				if (index == 0) {
					this.type = '';
				} else if (index == 1) {
					this.type = 'tq';
				} else if (index == 2) {
					this.type = 'qp';
				} else {
					this.type = 'ktv';
				}
				this.selIndex = index;
				this.list = [];
				this.page = 1;
				this.isLastPage = false;
				this.isnodata = false;
				this.getShopList();
				setTimeout(() => {
					this.changeTab = false;
				},1000)
			},

			// clickTabType(index) {

			// 	if (index == 0) {
			// 		this.type = 'tq';
			// 	} else if (index == 1) {
			// 		this.type = 'qp';
			// 	} else {
			// 		this.type = 'ktv';
			// 	}
			// 	this.selIndex = index;
			// 	this.list = [];
			// 	this.page = 1;
			// 	this.isLastPage = false,
			// 	this.isnodata = false,
			// 	this.getShopList();
			// },

			mtClick() {
				uni.navigateTo({
					url: '/pages/home/mtdou'
				})
			},

			clickCharge() {
				uni.navigateTo({
					url: '/pages/discount/newCharge'
				})
			},

			scanTable() {
				uni.scanCode({
					success: function(res) {
						console.info(res);
						var path = res.path;
						var page = path.split("?");
						var pageIndex = page[0];
						var str = path.split("=");
						var str2 = str[1];
						console.info("===path==" + str[1]);
						var shopId = str2.split("-")[0];
						var tableId = str2.split("-")[1];
						if (pageIndex == 'pages/order/submit') {
							uni.navigateTo({
								url: '/pages/order/submit?id=' + tableId
							})
						} else {

							uni.navigateTo({
								url: '/pages/order/ballSubmit?id=' + tableId
							})
						}


					}
				})
			},

			clickCity() {
				uni.navigateTo({
					url: '/pages/city/select?city=' + this.city
				})
			},

			onScroll(ev) {
				// 监听页面的滚动开始和结束
				clearTimeout(this.timer);
				this.timer = null;
				this.scrollIng = true;
				this.fixedClass = ev.detail.scrollTop > 325 ? 'fixed' : '';
				this.timer = setTimeout(() => {
					this.scrollIng = false;
				}, 2000);
			},


			bannerClick() {
				uni.navigateTo({
					url: '/pages/member/join'
				})
			},
			nextPage() {
				if (this.isLastPage) return;
				this.page += 1;
				this.getShopList();
			},


			selectCity(item) {

				this.$refs.citypicker.close();
				this.city = item;
				this.list = [];
				this.page = 1;
				this.isLastPage = false,
				this.isnodata = false,
				this.selIndex = 0,
				this.getShopList();
			},

			doSearch() {
				console.info("===search====");
				uni.navigateTo({
					url: '/pages/shop/search'
				})
			},

			init() {

				let _this = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						let provider = res.provider;
						uni.setStorageSync("provider", provider)
					},
					fail: function(res) {

					}
				});
				uni.login({
					provider: uni.getStorageSync("provider"),
					success: function(loginRes) {
						console.info(loginRes);
						let code = loginRes.code;
						_this.code = code;
						_this.autoLogin();


					},
					fail: function(res) {

					}
				})
			},

			autoLogin() {
				let that = this;
				let param = {
					code: this.code,
					orgId: this.orgId
				}
				this.$api.autoLogin(param).then(res => {

					if (res.code == 1) {
						uni.setStorageSync("mobile", res.data.mobile);
						uni.setStorageSync("token", res.data.token);
						uni.setStorageSync("avatar", res.data.avatar);
						uni.setStorageSync("username", res.data.username)
					}
					console.info(res);
				})

			},

			location(item) {
				uni.openLocation({
						name: item.name,
						latitude: parseFloat(item.lat),
						longitude: parseFloat(item.lng),
						address: item.address,
						fail: function(res) {
							console.info(JSON.stringify(res))
						}
					},

				)
				console.log("location" + JSON.stringify(item))
			},
			
			call(item) {

				uni.makePhoneCall({
					phoneNumber: item.tel
				})
				console.log("call" + JSON.stringify(item))

			},
			
			detail(item) {
				console.log("detail" + JSON.stringify(item))
				if(item.shop_type == 'KTV'){
					uni.navigateToMiniProgram({
						appId:"wx86160f502fd2c58b",
					    path: 'pages/home/index2'// path 路径
					})
				}else{
					uni.navigateTo({
						url: '/pages/shop/detail?id=' + item.id + "&distance=" + item.distance
					})
				}
				
			},

			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.lat = res.latitude;
						that.lng = res.longitude;

						uni.setStorageSync("lat", that.lat);
						uni.setStorageSync("lng", that.lng);
						that.initData();
						that.getShopList();
					},
					fail: function(res) {
						console.info("location  fail" + JSON.stringify(res))
					}
				})
			},

			initData() {

				let that = this;

				let param = {
					lat: this.lat,
					lng: this.lng,
					orgId: uni.getStorageSync("orgId")
				};

				this.$api.getCity(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.city = res.data.cityName;
						if (that.city == '') {
							that.city = "选择城市";
						}
						that.cityList = res.data.cityList;
						that.locationCity = res.data.cityName;
						that.banner = res.data.banner
					} else {

					}
				})
			},

			getShopList() {

				let that = this;

				var city = "";
				if (this.city == this.locationCity) {
					city = "";
				} else {
					city = this.city;
				}

				if (this.city == '选择城市' || this.city == '全部') {
					city = "";
				}

				let param = {
					lat: this.lat,
					lng: this.lng,
					city: city,
					page: this.page,
					orgId: uni.getStorageSync("orgId"),
					type: this.type,
					keyword: this.keyword

				};

				if (this.isRequestIng == true) return;

				this.isRequestIng = true;
				this.$api.getShopNewList(param).then(res => {

					that.isRequestIng = false;
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							this.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					} else {

					}
				})

			},

			onShowCityPicker() {
				this.$refs.citypicker.open();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		position: relative;
		.list {
			height: 100vh;
		}
		.menubox {
			.item {
				position: relative;
				&:after {
					content: '';
					width: 2rpx;
					height: 100rpx;
					position: absolute;
					top: calc(50% - 50rpx);
					right: 0;
					z-index: 2;
					background-color: rgba(229, 229, 229,.7);
				}
				&:last-child {
					&::after {
						display: none;
					}
				}
				.icon {
					width: 58rpx;
					height: 58rpx;
				}
			}
		}
		.searchbox {
			position: relative;
			margin-top: -60rpx;
			z-index: 1;
			
			.bgImage {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.title {
				position: relative;
				z-index: 2;
				.logo {
					width: 336rpx;
					height: 62rpx;
				}
				.brand {
					width: 106rpx;
					height: 44rpx;
				}
			}
			.search {
				position: relative;
				z-index: 2;
				background-color: #ffffff;
				.cfad {
					color: #FAD00D;
				}
			}
		}
		.tabbox {
			&.fixed {
				position: fixed;
				top: 220rpx;
				left: 0;
				width: 100%;
				z-index: 9;
				box-sizing: border-box;
				background: linear-gradient(-180deg, #f7de6a, #fbe47a, #fbf2cb);
			}

			.item {
				position: relative;

				.active {
					color: #1A1B20;
					font-weight: 600;
				}

				&::after {
					content: '';
					width: 2rpx;
					height: 26rpx;
					background-color: #CFCFCF;
					position: absolute;
					top: calc(50% - 13rpx);
					right: 28rpx;
				}

				&:nth-child(3) {
					&::after {
						display: none;
					}
				}

				.icon {
					width: 38rpx;
					height: 10rpx;
					position: absolute;
					bottom: -0rpx;
					left: calc(50% - 19rpx - 28rpx);
				}
			}

			.img {
				width: 236rpx;
			}

			.img2 {
				width: 306rpx;
			}
		}

		.contbox {
			.cont {
				position: absolute;
				height: 100%;
				width: 100%;
				top: 0;
				left: 0;

				.btn {
					color: #F59C1D;
					width: 126rpx;
					margin-top: 54rpx;
					background-color: rgba(255, 255, 255, .8);
				}
			}

			.left {
				position: relative;

				.imgbg {
					width: 108%;
					height: 280rpx;
				}
			}
			.left2 {
				position: relative;
				margin-left: 14rpx;
				.imgbg {
					width: 93%;
					height: 130rpx;
				}
				.avatar {
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					position: relative;
					margin-left: -8rpx;
					border: 2rpx solid #fff;
				}
			}

			.right {

				.box {
					position: relative;
					&.box2 {
						right: 12rpx;
					}
				}

				.imgbg {
					width: 95%;
					height: 130rpx;
				}

				.imgbg2 {
					margin-top: -12rpx;
					width: 100%;
					height: 130rpx;
					position: relative;
				}
				.imgbg3 {
					width: 101%;
					height: 130rpx;
					position: relative;
				}
			}
		}

		.bg {
			width: 100%;
			height: 442rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.rel {
			position: relative;
			z-index: 1;
		}

		.c1a {
			color: #1a1a1a;
		}

		.down {
			width: 40rpx;
			height: 40rpx;
		}

		.sear {
			width: 24rpx;
			height: 24rpx;
		}

		.ml8 {
			margin-left: 18rpx;
		}

		.bgImg {
			// width: calc(100% - 32rpx);
			height: 524rpx;
			image {height: 100% !important;}
		}
		.two{
			display: flex;
			justify-content: space-between;
		}
		.local{
			padding-left: 32rpx;
		}
		.all{
			margin-left: 10rpx;
			display: block; /* 或者使用 inline-block */
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 140rpx; /* 必须设置宽度 */
		}
		.ipt{
			background-color: #fff;
			margin-right: 24rpx;
		}
		.near{
			width: 38rpx;
			height: 38rpx;
		}
		.store {
			.ced {color: #ED7F5A;}
			.c1b {color: #1bb135;}
			.tag {border: 2rpx solid #F95C28;}
			.titlebox {
				background: linear-gradient(to right,#FFFBE3,#FFF6C5);
				border-radius: 18rpx 18rpx 0 0;
			}
			.rel {
				position: relative;
				.status {position: absolute;bottom: 10rpx;left: 10rpx;}
			}
			.logo {width: 210rpx;height: 280rpx;}
			.ellipsis1 {width: 436rpx;
				&.flex1 {width: 280rpx;}
			}
			.w17 {width: 34rpx;height: 34rpx;}
			.bgf95 {background-color: #F95C28;;color:#FFF}
			.cf95 {color: #F95C28;}
			.local {width: 24rpx;height: 24rpx;}
			.w44 {width: 88rpx;height: 68rpx;}
			.bgf5c {background-color: #F5C51D;}
		}
	}
</style>